<template>
  <div class="header-content">
    <div class="header-title">
      <router-link to="/index.html"><img src="//s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png" alt="美团"/>
      </router-link>
    </div>
    <div class="header-search-module">
      <div class="header-search-block">
        <input class="header-search-input" @focusin="noInputShow = true" @focusout="_noInputShow" type="text"
               placeholder="搜索商家或地点"/>
        <router-link class="header-search-btn" to="/search"><span
          class="header-search-icon iconfont icon-sousuo"></span></router-link>
      </div>
      <div class="header-search-suggest">
        <div class="header-search-noinput" v-show="noInputShow">
          <div class="header-search-history" style="display: none;">
            <h6>最近搜索</h6>
            <span class="header-search-clean">删除搜索历史</span>
            <ul></ul>
          </div>
          <h6 @mouseenter="noInputShow = true">热门搜索</h6>
          <div class="header-search-hotword">
            <a href="https://www.meituan.com/s/%E4%B8%8A%E4%B8%8A%E8%B0%A6%E7%81%AB%E9%94%85">上上谦火锅</a>
            <a
              href="https://www.meituan.com/s/%E6%B5%B7%E9%9F%B5%E4%B9%8B%E6%98%9F%E9%82%AE%E8%BD%AE%E6%B0%B4%E4%BC%9A">海韵之星邮轮水会</a>
            <a
              href="https://www.meituan.com/s/%E5%8D%97%E4%BA%AC%E5%A4%B1%E6%81%8B%E5%8D%9A%E7%89%A9%E9%A6%86">南京失恋博物馆</a>
            <a href="https://www.meituan.com/s/%E5%8D%A2%E7%B1%B3%E5%9F%83IMAX%E5%BD%B1%E5%9F%8E">卢米埃IMAX影城</a>
            <a
              href="https://www.meituan.com/s/%E6%A0%96%E9%9C%9E%E5%B1%B1%E9%A3%8E%E6%99%AF%E5%90%8D%E8%83%9C%E5%8C%BA">栖霞山风景名胜区</a>
            <a href="https://www.meituan.com/s/%E5%8D%97%E4%BA%AC%E6%80%BB%E7%BB%9F%E5%BA%9C">南京总统府</a>
            <a
              href="https://www.meituan.com/s/%E7%BA%A2%E5%B1%B1%E6%A3%AE%E6%9E%97%E5%8A%A8%E7%89%A9%E5%9B%AD">红山森林动物园</a>
            <a
              href="https://www.meituan.com/s/%E6%A2%93%E8%B4%A4%E9%98%81%E7%B2%BE%E5%93%81%E8%8F%9C%E9%A6%86">梓贤阁精品菜馆</a>
          </div>
        </div>
        <div class="header-search-hasinput">
          <ul></ul>
        </div>
      </div>
      <div class="header-search-hotword">
        <a href="https://www.meituan.com/s/%E4%B8%8A%E4%B8%8A%E8%B0%A6%E7%81%AB%E9%94%85">上上谦火锅</a>
        <a href="https://www.meituan.com/s/%E6%B5%B7%E9%9F%B5%E4%B9%8B%E6%98%9F%E9%82%AE%E8%BD%AE%E6%B0%B4%E4%BC%9A">海韵之星邮轮水会</a>
        <a href="https://www.meituan.com/s/%E5%8D%97%E4%BA%AC%E5%A4%B1%E6%81%8B%E5%8D%9A%E7%89%A9%E9%A6%86">南京失恋博物馆</a>
        <a href="https://www.meituan.com/s/%E5%8D%A2%E7%B1%B3%E5%9F%83IMAX%E5%BD%B1%E5%9F%8E">卢米埃IMAX影城</a>
        <a href="https://www.meituan.com/s/%E6%A0%96%E9%9C%9E%E5%B1%B1%E9%A3%8E%E6%99%AF%E5%90%8D%E8%83%9C%E5%8C%BA">栖霞山风景名胜区</a>
        <a href="https://www.meituan.com/s/%E5%8D%97%E4%BA%AC%E6%80%BB%E7%BB%9F%E5%BA%9C">南京总统府</a>
        <a href="https://www.meituan.com/s/%E7%BA%A2%E5%B1%B1%E6%A3%AE%E6%9E%97%E5%8A%A8%E7%89%A9%E5%9B%AD">红山森林动物园</a>
        <a href="https://www.meituan.com/s/%E6%A2%93%E8%B4%A4%E9%98%81%E7%B2%BE%E5%93%81%E8%8F%9C%E9%A6%86">梓贤阁精品菜馆</a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        noInputShow: false
      };
    },
    methods: {
      _noInputShow() {
        setTimeout(() => {
          this.noInputShow = false;
        }, 300);
      }
    }
  };
</script>

<style lang="stylus" rel="stylussheet/stylus">
  .header-content
    position relative
    height 122px
    padding-bottom 35px
    text-align center
    .header-title
      position absolute
      left 0
      top 0
      width 126px
      height 46px
      margin-top 28px
      img
        width 126px
        height 46px
    .header-search-module
      position relative
      padding-top 28px
      margin 0 auto
      width 45%
      .header-search-block
        height 40px
        font-size 0
        .header-search-input
          border 1px solid #E5E5E5
          border-right none
          border-radius 4px 0 0 4px
          line-height 100%
          display inline-block !important
          vertical-align top
          box-sizing border-box
          padding 15px
          font-size 14px
          height 100%
          background transparent
          width 85%
          outline none
        .header-search-btn
          display inline-block !important
          outline none
          width 15%
          box-sizing border-box
          background #FFC300
          border none
          color #222222
          cursor pointer
          border-bottom-right-radius 4px
          border-top-right-radius 4px
          text-align center
          .header-search-icon
            display inline-block
            font-size 24px
            padding 8px 0
            height 100%
            line-height 100%
            vertical-align middle
      .header-search-suggest
        width 85%
        box-sizing border-box
        position absolute
        border 1px solid #E5E5E5
        border-top none
        background #fff
        z-index 999
        box-shadow 0 3px 5px 0 rgba(0, 0, 0, 0.1)
        border-bottom-left-radius 4px
        border-bottom-right-radius 4px
        color #999
        font-size 12px
        text-align left
        h6
          font-size 12px
          font-weight 700
          padding 8px 0 0 8px
        .header-search-hotword
          padding 0 8px 8px 8px
          height 20px
          overflow hidden
          > a
            font-size 12px
            margin-right 10px
            display inline-block
            line-height 28px
      .header-search-hotword
        padding 4px 10px
        font-size 12px
        width 100%
        text-align left
        height 16px
        overflow hidden
        > a
          font-size 12px
          margin-right 10px
          display inline-block
          line-height 20px
</style>
